<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聘途</title>
    <link rel="icon" href="/image/favicon.ico" type="image/x-icon"/>
    <script src="/vue.min.js"></script>
    <script src="/axios.min.js"></script>
    <style>
        .home-page {
            border: none;
            height: 1200px;
            background-image: linear-gradient(to bottom, #d1eded, white);
            background-position: to center;

        }

        .menu {
            border: none;
            height: 5%;
            background-color: #202329;
            display: flex;
            align-items: center;
            /*垂直居中*/
        }

        .menu1 {
            list-style-type: none;
            margin-left: 5%;
            overflow: hidden;
        }

        .menu2 {
            text-align: center;
            color: white;
            float: left;
            width: 140px;
            font-size: large;


        }

        .menu2:hover {
            color: #00b4b3;
        }

        .usercenter {
            list-style-type: none;
            overflow: hidden;
            float: left;
            color: rgb(255, 255, 255);
            font-size: large;
            display: flex;
            margin-left: 800px;

        }

        .usercenter:hover {
            color: #00b4b3;
        }


        .job {
            height: 280px;
            border: black solid 1px;
            background-color: #38556b;

        }

        .jobdescribe {
            margin-top: 1%;
            border-radius: 16px;
            width: 50%;
            height: 440px;
            border: none;
            background-color: white;
            margin-left: 23%;

        }

        .safe {
            border-radius: 16px;
            width: 50%;
            margin-top: 1%;
            margin-left: 23%;
            height: 210px;
            border: none;
            background-image: url('/image/安全提示.png');
            background-size: 100% 100%;


        }

        .company {
            border-radius: 16px;
            margin-top: 1%;
            width: 50%;
            height: 400px;
            border: rgb(239, 230, 230) solid 1px;
            margin-left: 23%;
            background-color: white;

        }

        .p1 {
            position: absolute;
            margin: 0;
        }

        #button1,
        #button2 {
            border-radius: 16px;
            margin-left: 80%;
            margin-top: 200px;
            width: 100px;
            height: 50px;
            background-color: rgb(255, 255, 255);
            color: rgb(81, 212, 186);
            border: none;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #button1:hover,
        #button2:hover {
            background-color: #00b4b3;
            /* 更改背景颜色 */
            color: white;
            /* 更改文字颜色 */
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="home-page">
            <div class="menu">
                <h2 style="margin-left: 10%;color: #2fdfd1;">聘途</h2>
                <ul class="menu1">
                    <a href="首页.html">
                        <li class="menu2">首页</li>
                    </a>
                    <a href="推荐.html">
                        <li class="menu2">推荐</li>
                    </a>
                    <a href="首页公司.html">
                        <li class="menu2">公司</li>
                    </a>
                    <a href="APP.html">
                        <li class="menu2">APP</li>
                    </a>

                </ul>

                <a href="修改密码.html">
                    <li class="usercenter"> {{ userInfo.sname }}</li>
                </a>

            </div>

            <div class="job">
                <p class="p1"
                    style="margin-left: 15%;margin-top: 100px ;font-family: 宋体;font-size: 35px;color: white; ">
                    <b>{{jobInfo.pname}}</b>
                </p>
                <p class="p1" style="margin-left: 15%;margin-top: 180px ;font-family: 宋体;font-size: 25px;color: white;">
                    <b>{{jobInfo.cname}}</b>
                </p>
                <p class="p1" style="margin-left: 30%;margin-top: 105px ;font-family: 宋体;font-size: 36px;">
                    <b style="color: orangered;">{{jobInfo.salary}} </b><b style="color: white;"> 元/月</b>
                </p>
                <p class="p1" style="margin-left: 24%;margin-top: 180px;font-family: 宋体;font-size: 25px;">
                    <b style="color: rgb(255, 77, 77);">{{jobInfo.hot}} 热度</b>
                </p>

                <button id="button1" onclick="toggleButton()" @click="apply()">申请岗位</button>
                <button id="button2" onclick="toggleButton()" @click="deleteApply()">取消申请</button>





            </div>

            <div class="jobdescribe">
                <h2 style="margin-left: 3%;">职位描述</h2>
                <pre><code v-text="jobInformation" style="font-size: 18px;"></code></pre>



            </div>

            <div class="safe">

            </div>

            <div class="company">
                <h2 style="margin-left: 3%;">公司介绍</h2>
                <pre><code v-text="companyInformation" style="font-size: 18px;"></code></pre>


            </div>




        </div>

    </div>

    <script>
        var userInfo = JSON.parse(sessionStorage.getItem('userData'));
        var jobInfo = JSON.parse(sessionStorage.getItem('jobInfo'));
        var CompanyInfo = JSON.parse(sessionStorage.getItem('CompanyInfo'));

        function toggleButton() {
            var button1 = document.getElementById('button1');
            var button2 = document.getElementById('button2');

            // 如果当前是button1显示，则切换到button2
            if (button1.style.display === 'none') {
                button1.style.display = 'block';
                button2.style.display = 'none';
            } else {
                // 如果当前是button2显示，则切换到button1
                button1.style.display = 'none';
                button2.style.display = 'block';
            }
        }


        new Vue({
            el: '#app',
            data: {
                jobInformation: '',
                companyInformation: '',


            },
            created() {
                this.getifapply()
                this.Cinfo()
                this.Jinfo()
            },
            methods: {

                Cinfo() {
                    // 使用 Axios 从后端获取文件内容
                    let data = new FormData();
                    data.append("cinfo", CompanyInfo.cinfo);
                    axios.post("http://localhost:8080/hqdx/company/showCompanyProfile", data)
                        .then(response => {
                            console.log(jobInfo.cinfo)
                            // console.log(response)
                            this.companyInformation = response.data.data.items; // 更新Vue实例的数据
                        })
                        .catch(error => {
                            console.error('Error fetching file content:', error);
                        });
                },

                Jinfo() {
                    // 使用 Axios 从后端获取文件内容
                    let data = new FormData();
                    data.append("pinfo", jobInfo.pinfo);
                    axios.post("http://localhost:8080/hqdx/company/showPositionDescription", data)
                        .then(response => {
                            console.log(response)
                            this.jobInformation = response.data.data.items; // 更新Vue实例的数据
                        })
                        .catch(error => {
                            console.error('Error fetching file content:', error);
                        });
                },

                getifapply() {
                    let data = new FormData();
                    data.append("susername", userInfo.susername);
                    data.append("pid", jobInfo.pid);
                    axios.post('http://localhost:8080/hqdx/seeker/judgeApplyPosition', data)
                        .then(response => {
                            console.log(response.data);
                            if (response.data.success == true) {
                                document.getElementById('button1').style.display = 'none';
                                document.getElementById('button2').style.display = 'block';

                            }
                            else {



                                document.getElementById('button1').style.display = 'block';
                                document.getElementById('button2').style.display = 'none';

                            }
                        })
                        .catch(error => {
                            console.log(error);
                        });

                },

                apply() {

                    let data = new FormData();
                    data.append("susername", userInfo.susername);
                    data.append("pid", jobInfo.pid);
                    axios.post('http://localhost:8080/hqdx/seeker/applyPosition', data)
                        .then(response => {
                            console.log(response.data);

                        })
                        .catch(error => {
                            console.log(error);
                        });

                },

                deleteApply() {

                    let data = new FormData();
                    data.append("susername", userInfo.susername);
                    data.append("pid", jobInfo.pid);
                    axios.post('http://localhost:8080/hqdx/seeker/cancelApplyPosition', data)
                        .then(response => {
                            console.log(response.data);

                        })
                        .catch(error => {
                            console.log(error);
                        });

                }





            }
        })
    </script>
</body>

</html>